<template>
  <div class="i_addKeshi" style="padding-top:20px">
    <tmpHeader :index='3' v-if="type != 'jianguan' "/>
    <h1 style="text-align:center;font-weight:600;margin-bottom:15px;color: #333">科室新增</h1>
    <div class="i-keshi_main">
      <!--右侧科室-->
      <div class="i-keshi_main-right">     
        <h2 class="title">科室基本信息</h2>
        <Row >
            <Col span="8" class="left-part">
              <!-- 一级科室 -->
              <div class="keshi_name">
                  <div class="left">
                    <span class="hongdian">*</span>
                    <span>一级科室：</span>
                  </div>     
                  <Select  v-model="title" style="width: 75%" @on-change="changefirst" clearable>
                      <Option
                      v-for="(item,index) in data1"
                      :value="item.title"
                      :key="index"
                      >{{ item.title }}</Option>
                  </Select>                   
              </div>
              <!--科室Code-->
              <div class="keshi_name">
                <div class="left">
                  <span class ='leftname'>第三方科室CODE:</span>
                </div>
                <Input v-model.trim="medicineCode" clearable style="width: 45%" maxlength="200"/>   
                <Button type="primary" @click="changeDept(1)" style="margin-left:10px">院内科室</Button>            
              </div>
              <!--排序-->
                <div class="keshi_name_text" style="align-items:center;">
                  <div class="left">                 
                    <span>科室排序：</span>
                  </div>
                  <InputNumber v-model.trim="isort" max='99999' min='1' style="width: 80px"></InputNumber>             
                </div>
              <!--医技科室-->
              <div class="keshi_name_text">
                <div class="left">
                  <span class ='leftname'>是否医技科室:</span>
                </div>
                <iSwitch size="large"  v-model="medicalTechnology" style="margin-left:10px;" >
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                </iSwitch>
              </div>
            </Col>
            <Col span="8" class="left-part">
              <!-- 二级科室 -->
              <div class="keshi_name">
                  <div class="left">
                    <span class="hongdian">*</span>
                    <span>二级科室：</span>
                  </div>
                      <Select v-model="childDept" clearable style="width: 75%">
                          <Option
                          v-for="(items,index) in children"
                          :value="items.dictType"
                          :key="items.dictType"
                          >{{ items.dictName}}</Option>
                      </Select>                     
              </div>
              <!--科室图标-->
              <div class="keshi_name_fileImgs">
                <div class="left">
                  <span class ='leftname'>科室图标:</span>
                </div>
                <div class="input">
                  <div class="demo-upload-list" v-for="(item,index) in uploadList" :key='index'>
                    <div v-if="item.status === 'finished'">
                      <img :src="item.url">
                      <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                      </div>
                    </div>
                    <div v-else>
                      <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                    </div>
                  </div>
                  <Upload
                    v-show="uploadList.length ==0"
                    ref="upload"
                    :show-upload-list="false"
                    :default-file-list="defaultList"
                    :on-success="handleSuccess"
                    :format="['jpg','jpeg','png']"
                    :max-size="2000"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :before-upload="handleBeforeUpload"
                    multiple
                    type="drag"
                    :action="uploadUrl"
                    :headers="fromData"
                    :data="uploadData"
                    style="display: inline-block;width:58px;"
                  >
                    <div style="width: 58px;height:58px;line-height: 58px;">
                      <i class = "iconfont icon-shangchuan" style="font-size:20px;"></i>
                    </div>
                  </Upload>
                  <Modal title="预览图片" v-model="visible" footer-hide>
                    <img :src=" uploadList[0].url " v-if="visible" style="width: 100%">
                  </Modal>
                </div>               
              </div>
              <!--特色科室-->
              <div class="keshi_name_text">
                <div class="left">
                  <span class ='leftname'>是否特色科室:</span>
                </div>
                <iSwitch size="large"  v-model="specialDept" style="margin-left:10px;" >
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                </iSwitch>
              </div>
              
              <!--是否开通远程门诊-->
              <div class="keshi_name_text">
                <div class="left">                
                  <span class ='leftname'>是否开通远程门诊:</span>
                </div>
                <iSwitch size="large"  v-model="isremote" style="margin-left:10px;" >
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                </iSwitch>
              </div>
            </Col>
            <Col span="8" class="left-part">
                <!--院内名称-->
                <div class="keshi_name">
                  <div class="left">
                    <span class="hongdian">*</span>
                    <span class ='leftname'>院内名称:</span>
                  </div>
                  <Input v-model.trim="keshiname" clearable style="width: 300px" maxlength="25" placeholder="空"/>                 
                </div>
                <!--科室位置-->
                <div class="keshi_name">
                  <div class="left">
                    <span class ='leftname'>科室位置:</span>
                  </div>
                  <Input v-model.trim="deptPosition" clearable style="width: 300px" maxlength="25" placeholder="空"/>                 
                </div>
                <!--预约科室-->
                <div class="keshi_name_text" style="margin-top:30px;">
                  <div class="left">                
                    <span class ='leftname'>是否预约科室:</span>
                  </div>
                  <iSwitch size="large"  v-model="registeredReservation" style="margin-left:10px;" >
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </iSwitch>
                </div>
                <!-- 是否支持第三方预约挂号池 -->
                <!-- <div class="keshi_name_text">
                  <div class="left">                 
                    <span class ='leftname'>是否对接号源池:</span>
                  </div>
                  <iSwitch size="large"  v-model="thirdPartyRegistration" style="margin-left:10px;" >
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </iSwitch>
                </div> -->
            </Col>
        </Row>
      </div>       
      <!--科室简介-->
      <div class="i-keshi_main-right">
        <h2 class="title">科室简介</h2>
        <vueEditor
          id="editor_id"
          :textHtml="info.content"
          :urlCode="urlCode"
          @valueHandle="afterChange"
          :height='100'
          class="text"
        ></vueEditor>
      </div>
      <div class="save">
          <Button type="primary" :disabled='disabledSave' style="margin-right: 20px;width:75px;height:35px;" @click="save">
              <Icon type="ios-checkmark" style="margin-right: 5px" />保存
          </Button>
          <Button @click="back" style="width:75px;height:35px;">
              <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i> 取消 
          </Button>
      </div>
    </div>
    <Modal
        v-model = "modalStatus"
        width='600'
        :closable='false'
        :mask-closable="false"
        footer-hide>   
        <h3 style='text-align:center;font-weight:700;margin: 0 10px'>院内科室</h3>  
        <!-- <div style="display: inline-block;margin: 10px 0 10px 10px;">
            <span>项目分类：</span>
            <Select class="w-select" clearable v-model="inspection" style="width:120px;">
                <Option
                    v-for="item in projectCategoryList"
                    :value="item.id"
                    :key="item.id"
                    style='text-align:center'
                >{{item.name}}</Option>
            </Select>
        </div> -->
        <div style="display: inline-block;margin: 10px 0 10px 10px;">
            <Input
              v-model.trim="ksmc"
              placeholder="请输入科室名称检索"
              style="width: 150px"
              clearable
            />
        </div>
        <div style="display: inline-block;margin: 10px 0 10px 10px;">
            <Button type="primary" icon="ios-search" @click="changeDept(1,ksmc)">查询</Button>
        </div>
        <div style="display: inline-block;margin: 10px 0 10px 10px;float:right">
            <Button type='primary' @click="getThirdpartyDept">
                <Icon type="ios-checkmark" style="margin-right: 5px" />同步院内科室
            </Button>           
        </div>
        <Spin fix v-if="jiazai">同步中...</Spin>
        <Table :loading="tableLoading" border stripe :columns="columns1" :data="codeList" highlight-row ref="table" @on-current-change="handleRowChange"></Table>
        <Page
            :total="count"
            :current="pageNo"
            :pageSize="pageSize"
            style="margin-top:10px;text-align:center;"
            @on-change='pageChange'
        />
        <div style="text-align:center;margin:10px">
            <Button @click="goback" >
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i> 返回
            </Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import tmpHeader from "@/pages/organizat/contentmen/tmpHeader";
import { Tree } from "view-design";
import vueEditor from "@/components/vueEditor";
import code from "@/configs/base.js";
import api from "@/api/commonApi";
export default {
  components: {
    tmpHeader,
    vueEditor,
    Tree
  },
  data() {
    return {
      branchData: [{code:"02",name:"西城院区"},{code:"01",name:"房山院区"}],
      title: "",    //一级科室
      childDept: "",   //二级科室
      keshiname: "",
      deptPosition: "",
      isort: "",
      test2: "",
      // 开启按钮
      registeredReservation: true,
      isremote: true,
      specialDept: true,
      medicalTechnology: true,
      iremote: true,
      thirdPartyRegistration:false,
      defaultList: [],
      imgName: "",
      visible: false,
      uploadList: [],
      id: sessionStorage.getItem("hospitalId"),
      orgCode: sessionStorage.getItem("orgCode"),
      list: [],
      info: {
        content: ""
      },
      uploadModal: true,
      uploadData: { json: '{"urlCode":"' + code.urlCode.hospitalBanner + '"}' },
      activeUploadId: "5c2bf345-b973-4ffd-a52e-87bb9c1d2b72",
      uploadUrl: api.fileAll,
      images: "",
      currentId: -1,
      source: "",
      urlCode: '{"urlCode":"' + code.urlCode.richText + '"}',
      data1: [],
      medicineCode:'',
      children: [],
      selectedArr: [],
      ksmc: '',
      codeList: [],
      modalStatus: false,
      columns1:[
        {
            key: "sum",
            title: "排序",
            align: "center",
            width: 80,
            render: (h, params) => {
                let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                return h("span", sum);
            }
        },
        {
            key: "depcode",
            title: "科室CODE",
            align: "center",
            
        },
        {
            key: "depname",
            title: "科室名称",
            align: "center",
            
        },
      ],
      pageSize: 10,
      pageNo: 1,
      count: 10,
      disabledSave: false,
      hospitalId: '',
      type: '',
      jiazai: false
    };
  },
  created() {
    this.hospitalId = this.$route.query.hospitalId ? this.$route.query.hospitalId : null;
    this.type = this.$route.query.type
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/operation/mechanism/index",
        title: "机构运营"
      },
      {
        path: "/index/operation/home",
        title: "机构配置管理"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    this.uploadList = this.$refs.upload.fileList;
      //获取全部科室
      this.$axios
      .post(api.findParentType, {
        hospitalId: this.id,
        id: this.$route.query.id,
        parentType: "KBA_DICT_DEPT",
        pageNo: 1,
        pageSize: 10
      })
      .then(res => {
        if (res.data) {
          let ret = res.data.object;
          console.log("全部科室数据",ret);
          let data1 = [];
          //获取一级科室及其下的二级科室
          ret.forEach((item, index) => {
            let a = {};
            a.title = item.dictName;
            a.dictType = item.dictType;
            a.parentType = item.parentType;
            a.sub = item.childList  
            data1.push(a);            
          });      
          this.data1 = data1;    //一级科室 
          this.list = ret;
          let children = [];
          let arr = []   
          //获取具体某个一级科室下的二级科室
          this.data1.forEach((item, index) => {
            if(item.sub !=undefined && item.sub !="undefined" ){
              children.push(item.sub)
              //获取所有二级科室的id
                item.sub.forEach(x => {
                arr.push(x.id);  
              })    
            }       
          })
          // console.log(children)
          this.selectedArr = [] //对已添加的二级科室不做过滤去除，若需要去掉已添加的二级科室把此句注释掉即可
            //去掉已经选择的二级科室
            var tempArr1 = []
            var tempArr2 = []
            for(var i=0;i<this.selectedArr.length;i++){
              tempArr1[this.selectedArr[i]] = true
            }
            for(var i=0;i<arr.length;i++){              
              if(!tempArr1[arr[i]]){
                tempArr2.push(arr[i])
              }
            }
            //显示可选择的二级科室
            let optional = []
            children.forEach(y =>{
              y.forEach(z =>{
                tempArr2.forEach(s =>{
                  if(z.id == s){
                    optional.push(z)
                  }
                })
              })
            })
          this.children = optional
        }
      });    
      //获取已经被选的二级科室
    this.$axios
      .post(api.childDept, {
        hospitalId: this.id
      })
      .then(res => {
        if (res.data.success) {
          let ret = res.data.object.hospitalVo.ids;
          for (let i = 0; i < ret.length; i++) {
            this.selectedArr.push(ret[i]);
          }
        }
      });
  },
  methods: {
    goback(){
      this.ksmc = ''
      this.pageNo = 1
      this.modalStatus = false
    },
    //获取第三方科室
    getThirdpartyDept(){
      this.jiazai = true
      let params = {
        hospitalId: this.id,
        orgCode: this.orgCode
      }
      this.$axios
        .post(api.findThirdpartyDeptList, params)
        .then(res => {
          if (res.data.code == 1) {
            this.$Message.info(res.data.message);
            this.jiazai = false
            this.changeDept(1)
          } else {
            this.jiazai = false
            this.$Message.error(res.data.message);
          }
        })
        .catch(err => {
          this.jiazai = false
          console.log(err);
        });
    },
    //获取第三方科室code
    changeDept(pageNo, ksmc) {
      this.pageNo = pageNo
      if(this.modalStatus == false){
        this.modalStatus = true
      }     
      let params = {
        hospitalId: this.id,
        searchKey: ksmc,
        pageNo: pageNo,
	      pageSize: this.pageSize,
      }
      this.$axios
        .post(api.getThirdpartyDeptList, params)
        .then(res => {
          if (res.data.success) {
            this.count = res.data.object.total;
            let ret = res.data.object.records;
            if(ret){
              // ret.forEach((item,index) => {
              //   // 排序
              //   item.sum = this.addZeros(index)
              // })   
              this.codeList = ret
            } else {
              this.codeList = []
            }
          } 
        })
        .catch(err => {
          console.log(err);
          this.disabledSave = false
        });
    },
    //选择第三方科室code
    handleRowChange(currentRow, oldCurrentRow){
        this.medicineCode = currentRow.depcode       
        this.keshiname = currentRow.depname     
        this.modalStatus = false  
    },
    // 分页
    pageChange(index) {
      this.pageNo = index;
        if (this.ksmc) {
            this.changeDept(index, this.ksmc);
        } else {
            this.changeDept(index);
        }
    },
    //根据一级科室获取二级科室
    changefirst(){
      this.childDept = ''
         let children = [];
          let arr = []           
          //获取具体某个一级科室下的二级科室
          this.data1.forEach((item, index) => {
            if(this.title == item.title){
              children.push(item.sub)
            } 
            //获取所有二级科室的id
              if(item.sub){
                item.sub.forEach(x => {
                  arr.push(x.id);  
                })            
              }
            })
            //去掉已经选择的二级科室
            // console.log(arr)
            // console.log(this.selectedArr)
            var tempArr1 = []
            var tempArr2 = []
            for(var i=0;i<this.selectedArr.length;i++){
              tempArr1[this.selectedArr[i]] = true
            }
            // console.log(tempArr1)
            for(var i=0;i<arr.length;i++){              
              if(!tempArr1[arr[i]]){
                tempArr2.push(arr[i])
              }
            }
            // console.log(tempArr2)
            //显示可选择的二级科室
            let optional = []
            children.forEach(y =>{
              console.log(y)
              y.forEach(z =>{
                tempArr2.forEach(s =>{
                  if(z.id == s){
                    optional.push(z)
                  }
                })
              })
            })
          this.children = optional
    },
    // 后退
    back() {
      let pageNo = this.$route.params.pageNo;
      if(this.type == 'jianguan'){
        // this.$router.back(-1);
        this.functionJS.queryNavgationTo(this, "/index/supervision/qualificationApply/edit", {
          // 公用方法
          hospitalId: this.hospitalId
        }); 
      } else {
        // this.functionJS.queryNavgationTo(this, "list", {
        //   // 公用方法
        //   pageNo
        // }); 
        this.$router.back(-1);
      }
    },
    //保存
    save() {
      this.disabledSave = true
      let images = "";
      let params = {
        //一级科室
        parentDictName: this.title, 
        //二级科室
        dictType: this.childDept,
        //科室别名
        deptNickname: this.keshiname,
        //科室位置
        deptPosition: this.deptPosition,
        //科室排序
        showindex: Number(this.isort),
        //简介
        description: this.info.content,
        //特色
        deptDetails: this.info.content,
        //预约科室
        registeredReservation: Number(this.registeredReservation),
        isremote: Number(this.isremote),
        //特色科室
        specialDept: Number(this.specialDept),
        //医技科室
        medicalTechnology: Number(this.medicalTechnology),
        hospitalId: this.id,
        // 科室开通远程门诊
        iremote: Number(this.iremote),
        // 科室code
        code:this.medicineCode,
        // 第三方预约挂号池
        // thirdPartyRegistration: Number(this.thirdPartyRegistration),
        display: Number(1),
      };
      //图片
      if (this.images != "" && this.uploadList.length) {
        params.icon = this.images;
      } else if (this.uploadList.length) {
        params.icon = this.source;
      } else {
        params.icon = "";
      }
      if(!this.title || this.title == ''){
        this.$Message.error("请选择一级科室");
        this.disabledSave = false
        return
      } 
      if(!this.childDept || this.childDept == ''){
        this.$Message.error("请选择二级科室");
        this.disabledSave = false
        return
      } 
      if(!this.keshiname || this.keshiname == ''){
        this.$Message.error("请填写院内名称");
        this.disabledSave = false
        return
      } 
      this.data1.forEach((item, index) => {
        if(this.title == item.title){
          params.parentDictType = item.dictType
        }    
      })
      this.children.forEach((item, index) => {
        if(this.childDept == item.dictType){
          params.dictName = item.dictName
        }    
      })
      let url = ''
      if(this.type == 'jianguan'){
        params.hospitalId = this.hospitalId
        url = api.insertSuperviseDept
      } else {
        url = api.insertDept
      }
      this.$axios
        .post(url, params)
        .then(res => {
          if (res.data.success) {
            this.$Message.info("新增成功");
            let pageNo = this.$route.params.pageNo;
            this.disabledSave = false
              if(this.type == 'jianguan'){
                this.functionJS.queryNavgationTo(this, "/index/supervision/qualificationApply/add", {
                  // 公用方法
                  pageNo
                }); 
              } else {
                this.functionJS.paramsNavgationTo(this, "medicineList", {
                  // 公用方法
                  pageNo
                }); 
              }
          } else {
            this.$Message.error("新增失败");
            this.disabledSave = false
          }
        })
        .catch(err => {
          console.log(err);
          this.disabledSave = false
        });
        sessionStorage.setItem("ksdm", this.medicineCode);
    },
    // 上传图片相关事件
    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
      this.uploadList.splice(0, 1);
    },
    handleSuccess(res, file) {
      res = this.uploadFileDecrypt(res);
      file.url = this.fileBaseUrl + res.object[0].fileName;
      this.images = JSON.stringify(res.object[0]);
      file.name = res.object[0].fileName;
      if (this.uploadList.length < 1) {
        this.uploadList.push({
          name: "a42bdcc1178e62b4694c830f028db5c0",
          percentage: 100,
          status: "finished",
          uid: 1544263544970,
          url: this.fileBaseUrl + res.object[0].fileName
        });
      }
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "格式错误",
        desc: "文件 " + file.name + " 上传失败,请重试"
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "文件过大",
        desc: `文件${file.name}过大，文件最大限制为2000KB`
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 1;
      if (!check) {
        this.$Message.info("最多只能上传一张图片");
      }
      return check;
    },
    // 富文本编辑器
    afterChange(val) {
      this.info.content = val;
    },
    // 图片兼容
    analysisImages(json) {
      try {
        json = JSON.parse(json);
        return this.fileBaseUrl + json.fileName;
      } catch (error) {
        return "";
      }
    },
    byIdGetDom(id) {
      let wrapper = document.getElementsByClassName("i-keshi_main-left")[0];
      let li = wrapper.getElementsByTagName("li");
      this.currentId = id;
      let el = "";
      for (let i = 0; i < li.length; i++) {
        if (li[i].getAttribute("data-id")) {
          if (id == li[i].getAttribute("data-id")) {
            el = li[i];
          }
        }
      }
      let parent = el.parentNode;
      el.classList.add("active");
      parent.style.display = "block";
    },
    threeChild(index) {
      if (index.length == 0) {
        return "";
      }
      if (Boolean(index[0].id) && index[0].id != this.currentId) {
        this.currentId = index[0].id;
      }
    }
  }, 
};
</script>
<style scoped lang="less">
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.i_addKeshi {
  width: calc(100);
  padding: 10px 30px;
  margin: 0 auto;
  background: #fff;
  .i-keshi_main {
    width: 100%;
    height: auto;
    margin: 10px auto;
    // .i-keshi_main-left {
    //   min-width: 200px;
    //   height: 500px;
    //   border: 1px solid #ccc;
    //   margin-right: 20px;
    //   border-radius: 10px;
    //   overflow:auto;
    // }
    .i-keshi_main-right {
      width: 98%;
      display: flex;
      flex-direction: column;
      margin: 10px auto;
      border: 1px solid #f0f0f0;
      box-shadow: 0 4px 3px #ebedf8;
      border-radius: 5px;
      margin-bottom: 20px;
      padding-bottom: 20px;
      .box{
        padding: 0 20px;
      }
      .hongdian{
        color:red;
        margin-left:-8px
      }
      .title {
        font-size: 20px;
        padding-left: 15px;
        margin-bottom: 20px;
        color: #333;
        height: 40px;
        line-height: 40px;
        background: #ebedf8;         
      }
      .left-part {
        padding-left: 50px;
        box-sizing: border-box;
      }
      .keshi_name {
        display: flex;
        flex-direction: row;
        height: 50px;
        align-items: center;
        margin: 0 auto;
        .left {
          font-size: 14px;
          padding-top: 5px;
          margin-right: 15px;
          span:last-child {
            font-weight: 600;
          }
        }
        input {
          outline: none;
          width: 100%;
          height: 36px;
        }
      }
      .keshi_name_fileImgs {
        display: flex;
        flex-direction: row;
        .left {
          font-size: 14px;
          padding-top: 5px;
          margin-right: 15px;
          span:last-child {
            font-weight: 600;
          }
        }
        p {
          margin-left: 20px;
        }
      }
      .keshi_name_text {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        .left {
          // min-width: 150px;
          font-size: 14px;
          padding-top: 5px;
          margin-right: 15px;
          span:last-child {
            font-weight: 600;
          }
        }
        textarea {
          outline: none;
          width: 400px;
          height: 100px;
        }
      }
    }
    .save {
      width: 200px;
      margin: 20px auto;
      text-align: center;
    }
  }
}
.demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>